import './style.css'
import { createCanvas } from './utils'

function getContext(id: string) {
    const canvas = createCanvas('#app', id, 300, 300)
    canvas.style.display = 'block'
    return canvas.getContext('2d')!
}

// fillStyle 填充
const draw1 = () => {
    const canvas = createCanvas('#app', 'canvas1', 300, 300)
    canvas.style.display = 'block'
    const ctx = canvas.getContext('2d')!

    ctx.fillStyle = 'red'
    ctx.fillRect(0, 0, 100, 100)

    ctx.fillStyle = 'blue'
    ctx.fillRect(100, 100, 100, 100)
}
draw1()

// strokeStyle 画线
const draw2 = () => {
    const canvas = createCanvas('#app', 'canvas2', 300, 300)
    canvas.style.display = 'block'
    const ctx = canvas.getContext('2d')!

    ctx.strokeStyle = '#8e44ad'
    ctx.lineWidth = 10
    ctx.lineJoin = 'round'
    ctx.strokeRect(50, 50, 100, 100)
}
draw2()

// 画圆
const draw3 = () => {
    const canvas = createCanvas('#app', 'canvas3', 300, 300)
    canvas.style.display = 'block'
    const ctx = canvas.getContext('2d')!

    ctx.beginPath()
    ctx.arc(75, 75, 35, 0, Math.PI * 2)
    ctx.strokeStyle = 'red'
    ctx.stroke()
}
draw3()

// 绘制多边形
const draw4 = () => {
    const ctx = getContext('canvas4')

    ctx.beginPath()
    ctx.moveTo(50, 50)
    ctx.lineTo(100, 50)
    ctx.lineTo(100, 100)
    ctx.closePath()
    ctx.strokeStyle = 'skyblue'
    ctx.lineWidth = 5
    ctx.stroke()
}
draw4()

// 使用渐变
const draw5 = () => {
    const ctx = getContext('canvas5')
    const linearGradient = () => {
        const linearGradient = ctx.createLinearGradient(0, 0, 100, 0)
        linearGradient.addColorStop(0, 'green')
        linearGradient.addColorStop(0.3, 'pink')
        linearGradient.addColorStop(0.7, 'red')
        linearGradient.addColorStop(1, 'blue')
        return linearGradient
    }
    ctx.fillStyle = linearGradient()
    ctx.fillRect(0, 0, 100, 100)
}
draw5()

// 使用文字
const draw6 = () => {
    const ctx = getContext('canvas6')
    const fillBackground = () => {
        ctx.fillStyle = '#34495e'
        ctx.fillRect(0, 0, 300, 300)
    }
    fillBackground()
    ctx.font = 'bold 48px serif'
    ctx.textBaseline = 'top' // 设置文字基线
    ctx.fillStyle = 'red'
    ctx.fillText('Hello World', 0, 0)
}
draw6()

// 使用图片贴图
const draw7 = async () => {
    const ctx = getContext('canvas7')
    const svg = await import('./typescript.svg')
    const image = new Image()
    image.src = svg.default
    image.onload = () => {
        ctx.fillStyle = ctx.createPattern(image, 'repeat')!
        ctx.fillRect(10, 10, 100, 100)
    }
}
draw7()

// 绘制随机色块
const draw8 = () => {
    const canvas = createCanvas('#app', 'canvas8', 300, 300)
    canvas.style.display = 'block'
    const ctx = canvas.getContext('2d')!

    const fillBackground = () => {
        ctx.fillStyle = '#000'
        ctx.fillRect(0, 0, 300, 300)
    }

    const draw = () => {
        const colors = ['#1abc9c', '#27ae60', '#2980b9', '#8e44ad', 'pink', 'skyblue']
        const randomColor = () => colors[Math.floor(Math.random() * colors.length)]
        const randomPosition = () => [Math.random() * canvas.width, Math.random() * canvas.height]
        const randomRadius = () => 10 + Math.random() * 25
        for (let i = 0; i < 100; i++) {
            ctx.fillStyle = randomColor()
            const [x, y] = randomPosition()

            ctx.beginPath()
            ctx.arc(x, y, randomRadius(), 0, Math.PI * 2)
            ctx.fill()
        }
    }

    fillBackground()
    draw()
}
draw8()
